<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疫苗预约信息列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<!-- 添加搜索表单 -->
<div class="input-group mb-3">
    <input type="text" id="searchIdCard" class="form-control" placeholder="请输入身份证号">
    <button class="btn btn-outline-secondary" type="button" id="searchButton">查询</button>
</div>

<div class="container my-5">
    <table id="vaccineTable" class="table table-striped">
        <thead>
        <tr>
            <th>序号</th>
            <th>身份证号</th>
            <th>预约日期</th>
            <th>疫苗名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalLabel">详情信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 详情内容将动态填充 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary confirm-btn">确认</button>
            </div>
        </div>
    </div>
</div>

<script>
    let idcardx;
    let vname;
    document.addEventListener("DOMContentLoaded", function() {
        fetchDataAndRenderTable();
    });

    function fetchDataAndRenderTable() {
        fetch('./adminData')
            .then(response => response.json())
            .then(data => {
                const tbody = document.querySelector('#vaccineTable tbody');
                tbody.innerHTML = '';
                data.forEach((item, index) => {
                    const row = `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${item.idcard}</td>
                            <td>${item.data}</td>
                            <td>${item.room}</td>
                            <td>
                                <button class="btn btn-sm btn-info view-detail" data-id="${item.idcard}" data-vaccine="${item.room}">
                                    查看详情
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });

                attachDetailButtonClickEvent();
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    function attachDetailButtonClickEvent() {
        const detailButtons = document.querySelectorAll('.view-detail');
        detailButtons.forEach(button => {
            button.addEventListener('click', function() {
                const idCard = this.getAttribute('data-id');
                const vaccineName = this.getAttribute('data-vaccine');
                fetchDetails(idCard, vaccineName);
            });
        });
    }

    function fetchDetails(idCard, vaccineName) {
        fetch(`./St?idcard=${idCard}&vaccine=${vaccineName}`)
            .then(response => response.json())
            .then(detailData => {
                populateModal(detailData);
                idcardx = detailData.idcard;
                vname = detailData.room;
                console.log(idcardx+" "+vname);
                $('#detailModal').modal('show');
            })
            .catch(error => console.error('Error fetching details:', error));
    }

    function populateModal(detailData) {
        const modalBody = document.querySelector('#detailModal .modal-body');
        modalBody.innerHTML = `
            <p><strong>ID:</strong> ${detailData.id}</p>
            <p><strong>排队号:</strong> ${detailData.queue_number}</p>
            <p><strong>状态:</strong> ${detailData.state}</p>
            <p><strong>身份证号:</strong> ${detailData.idcard}</p>
            <p><strong>预约日期:</strong> ${detailData.data}</p>
            <p><strong>疫苗名称:</strong> ${detailData.room}</p>
        `;
    }

    document.querySelector('.confirm-btn').addEventListener('click', function() {
        console.log(idcardx+" "+vname);
        fetch('./passdata?idcard='+idcardx+'&vaccine='+vname, { method: 'POST' }) // 根据实际情况调整请求方法
            .then(()=> {
                console.log('Data passed successfully');
                location.reload(true);
            })
            .catch(error => console.error('Error passing data:', error))
            .finally(() => $('#detailModal').modal('hide'));
    });
    // 查询按钮点击事件处理
    document.getElementById('searchButton').addEventListener('click', function() {
        const searchIdCard = document.getElementById('searchIdCard').value.trim();
        if (searchIdCard) {
            fetch(`./selectQueue?idcard=${searchIdCard}`)
                .then(response => response.json())
                .then(searchData => {
                    if (Array.isArray(searchData) && searchData.length > 0) {
                        renderSearchResults(searchData);
                    } else {
                        alert('未找到匹配的预约信息');
                        // 可选择清空表格或恢复原有数据
                    }
                })
                .catch(error => console.error('Error fetching search data:', error));
        } else {
            // alert('请输入身份证号');
            fetchDataAndRenderTable();
        }
    });

    // 渲染查询结果到表格
    function renderSearchResults(data) {
        const tbody = document.querySelector('#vaccineTable tbody');
        tbody.innerHTML = ''; // 先清空表格内容
        data.forEach((item, index) => {
            const row = `                <tr>
                    <td>${index + 1}</td>
                    <td>${item.idcard}</td>
                    <td>${item.data}</td>
                    <td>${item.room}</td>
                    <td>
                        <button class="btn btn-sm btn-info view-detail" data-id="${item.idcard}" data-vaccine="${item.room}">
                            查看详情
                        </button>
                    </td>
                </tr>
            `;
            tbody.innerHTML += row;
        });

        // 重新绑定详情按钮点击事件
        attachDetailButtonClickEvent();
    }
</script>

</body>
</html>
